<template>
    <div class="wrapXFoo">
        <foo
            v-bind="bindValue"
            v-on="bindEvent">
            <template v-for="(value, name) in $scopedSlots" v-slot:[name]="scoped">
                <slot :name="name" v-bind="scoped"></slot>
            </template>                       
        </foo>
    </div>
</template>

<script>
import foo from './foo'
export default {
    name: 'wrapXFoo',

    components: {
        foo,
    },

    props: {
        content: {
            type: String,
            default: 'this is wrapXFoo',
        },
    },

    data () {
        return {
            defaultPersons: [{
                name: 'tony',
                age: 10
            }]
        }
    },
    computed: {
        bindValue () {
            return {
                ...this.$attrs,
                ...this.$props,
                persons: [...this.defaultPersons, ...this.$attrs['persons']]
            }
        },
        bindEvent () {
            let echo = (...arg) => {
                console.log('----', this.$options.name)
                this.$listeners.echo(...arg)
            }
            return {
                ...this.$listeners,
                echo
            }
        }
    }

}
</script>

<style scoped>
.wrapXFoo {
    border: 1px solid green;
}
</style>
